<template>
  <div class="item">
    <el-checkbox v-model="item.checked" :label="item.name" size="large" />
    <el-button @click="handleItem(item.name)">删除</el-button>
  </div>
</template>
    
<script setup>
import {ref} from 'vue'
defineProps({
  item:{
    type:Object
  }
})
const $emit = defineEmits(["DelItem"])
const handleItem = (name)=>{
  $emit("DelItem",name)
}
</script>
    
<style scoped>
.item{
    display: flex;
    justify-content: space-between;
    border: 1px solid #eee;
    align-items: center;
    padding:2px 15px;
    margin-top: 5px;
    border-radius: 5px;
}
.item:hover{
    background: rgba(51, 51, 51, 0.021);
}
</style>